{{include './index_header.html' '排行榜'}}
<style>
    .song{
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
    }
    .mui-spinner{
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    h3,h4{
        /* justify-self: center; */
        text-align: center;
    }
</style>
<div class="mui-content">
    <ul class="mui-table-view">
        <h3>
            <span class="mui-spinner"></span>
            <h4>加载中</h4>
        </h3>
    </ul>
</div>

<script>
    var rid = location.search.split('=')[1]
    $.get('https://wyy-nine.vercel.app/playlist/detail?id='+rid,(data)=>{
        console.log(data);
        var str = ''
        data.playlist.tracks.forEach((item,index)=>{
            var singers = ''
                item.ar.forEach((x)=>{
                    singers += x.name + '&nbsp;'
                })
            str += `
            <li class="mui-table-view-cell" data-id="${item.id}"><span class="song">${item.name}----${singers} </span>
                <span class="mui-badge ">${index+1}</span>
            </li>
            
            `
        })
        
        $('.mui-table-view').html(str)
        $('.mui-badge').eq(0).addClass('mui-badge-danger')
        $('.mui-badge').eq(1).addClass('mui-badge-purple')
        $('.mui-badge').eq(2).addClass('mui-badge-warning')
        $('.mui-title').html(data.playlist.name)
    })
    $('.mui-table-view').on('click','.mui-table-view-cell',function(){
        location.href = '/play?id='+$(this).data().id
    })
</script>
</body>
</html>